<template>
  <div>
    <el-dialog
      :title="eject.isadd == true ? '会员添加' :'会员编辑'"
      :visible.sync="eject.isshow"
      @closed="guanbi"
    >
      {{ form }}
      <el-form :model="form">
        

        <el-form-item label="手机号" label-width="120px" :rules="rules">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" label-width="120px" :rules="rules">
          <el-input
            v-model="form.nickname"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" :rules="rules">
          <el-input
            v-model="form.password"
            autocomplete="off"
            required
          ></el-input>
        </el-form-item>

       

        

        <el-form-item label="状态" label-width="120px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()" v-if="eject.isadd"
          >添 加</el-button
        >
        <el-button type="primary" @click="update" v-else>编 辑</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqmenberone,
  reqmemberedit,
  
  reqspecsadd
} from "../../../request/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { mapActions,mapGetters} from 'vuex'

export default {
  props: [ "eject" ],
  data() {
    return {
      form: {
        uid: "",
        nickname: "",
        phone: "",
        password: "",
        status: 1,
        
      },
      // 存放规格属性的数组
      arrAttr:[
          {
            value:"",
          }
      ],
      rules: [
        {
          required: true,
        },
      ],
      imageUrl: "",
    };
  },
  created() {},
  mounted() {},
  computed:{
      ...mapGetters({
        lista:'specs/list'
      })
  },
  methods: {
    addAttr(){
        this.arrAttr.push({value:""})
    },
    ...mapActions({
        reslist:'specs/reqlist'
    }),

    handleAvatarSuccess(file) {
  
     
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 关闭弹框清楚样式清空表单
    guanbi() {
      !this.eject.isadd && this.empty();
    },

    // 点击取消告诉父组件关闭
    close() {
      this.$emit("close");
    },
    // 封装一个清空方法
    empty() {
      this.form = {
          uid: "",
        nickname: "",
        phone: "",
        password: "",
        status: 1,
      };
      this.arrAttr = [
        {
            value:'',
          }
      ]
    },
    //点击添加按钮
    add() {
      this.form.attrs = (this.arrAttr.reduce((val,item)=>{
        return val += item.value + ","
      },"")).slice(0,(this.arrAttr.reduce((val,item)=>{
        return val += item.value + ","
      },"")).length - 1)

      reqspecsadd(this.form).then((res) => {
        // 添加成功之后
        if (res.data.code == 200) {
          // 弹出弹框
          successAlert(res.data.msg);
          // 清空输入框
          this.empty();
          // 弹框消失
          this.eject.isshow = false;
          // 重新列表请求
          this.reslist()
        }
      });
    },
    update() {
      // 请求接口
      reqmemberedit(this.form).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          // 弹出成功提示框
          successAlert(res.data.msg);
          // 清空输入框
          this.empty();
          // 关闭弹窗
          this.eject.isshow = false;
          // 通知仓库更新列表
          this.reslist()
          return;
        }
        if (res.data != 200) {
          errorAlert(res.data.msg);
        }
      });
    },

   

    // 获取一条信息方法，父组件通过ref调用
    getone(id) {
      reqmenberone({ uid: id }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
        
          this.form = res.data.list
          this.form.password = ""
     
          
        }
      });
    },
  },
};
</script>

<style scoped  lang='less'>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box{
  display: flex;
}
</style>
